<template>
  <div>
    <h3>Home组件</h3>
    <button @click="news">新闻</button>
    <button @click="game">游戏</button>
    <button @click="movie">电影</button>
    <hr />
    <hr />

    <button @click="newsReplace">新闻Replace</button>
    <button @click="gameReplace">游戏Replace</button>
    <button @click="movieReplace">电影Replace</button>
    <hr />
    <hr />
    <button @click="$router.go(2)">前进2</button>
    <button @click="$router.back()">后退</button>
    <button @click="$router.forward()">前进</button>
    <hr />
    <hr />
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
    news() {
      // 重复点击路由导航会报错 因为返回的式一个错误的promise实例 可以在方法中传入 空的回调
      // 字符串
      // this.$router.push(
      //   "/home/new",
      //   () => {},
      //   () => {}
      // );

      // const result = this.$router.push("/home/new");
      // console.log(result);
      // result.then(
      //   () => {},
      //   () => {}
      // );

      // 使用重写的push方法 解决重复点击报错的问题
      this.$router.push("/home/new");
    },
    game() {
      this.$router.push({
        path: "/home/game",
      });
    },
    movie() {
      this.$router.push({
        name: "movie",
      });
    },
    newsReplace() {
      // 使用重写的replace方法 解决重复点击报错的问题
      this.$router.replace("/home/new");
    },
    gameReplace() {
      this.$router.replace("/home/game");
    },
    movieReplace() {
      this.$router.replace("/home/movie");
    },
  },
};
</script>

<style></style>
